<style lang=less scoped>
	@import "../../variables.less";
	@import "../../resource/common.less";

	@currentWidth: 600px;
	.elevator {
		width: 50%;
		padding: @middleSpace;
		display: inline-block;
		height: 77px;

		.elevatorMain {
			text-align: center;
			float: left;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: @fontSizeB;
			height: 100%;
			border: 1px solid;
			border-radius: 6px;
			width: 80px;
			flex-direction: column;
		}

		.eleCode {
			flex-grow: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		.eleNumber {
			font-size: 14px;
			width: 100%;
		}

		.detail {
			margin-left: 100px;
		}
	}

	.elevatorContent {
		height: 100%;
		flex-grow: 1;
		display: block;
		overflow: auto;
	}

	.legends {
		position: absolute;
		width: 200px + 2 * @middleSpace;
		bottom: 20px;
		right: 620px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		color: #FFF;
		padding: @middleSpace;

		&:empty {
			display: none;
		}

		.legend {
			width: 100px;

			code {
				margin-right: @smallSpace;
			}
		}
	}
</style>
<template>
	<div>
		<drag :height=300 :left=60 :top=100 :width=450 @close="showSmt = false" showClose title="电梯监控" v-show="showSmt">
			<video :id="id" style="width: 100%;height: 100%" v-show="!loading" />
			<Loading v-show="loading" />
		</drag>
		<div class="mainContent">
			<div class="head">电梯监测</div>
			<div class="elevatorContent">
				<template v-for="i in elevator">
					<div :key="i.type" class="blockTitle">{{i.type}}</div>
					<div :key="j.code" class="elevator" v-for="j in i.data">
						<div :style="{borderColor: j.HTMLColor}" class="elevatorMain">
							<div :style="{backgroundColor: j.HTMLColor + '54'}" class="eleCode">{{j.code}}</div>
							<div :style="{backgroundColor: j.HTMLColor}" class="eleNumber">{{j.serialnumber}}</div>
						</div>
						<div class="detail">
							<ul>
								<li>
									<span @click="updateStream(j.Guid)" style="float: right" v-if="j.Guid"><Icon
										style="color: dodgerblue;font-size:18px;cursor: pointer" type="ios-videocam" /></span>
									<span style="color: coral">{{j.Lastfloor}}</span>
								</li>
								<li>
									<span style="float: right">{{j.RunStation}}</span>
									<span>状态</span>
								</li>
								<li style="color:#C1C1C1">
									<span style="float: right">{{j.Troublestation}}</span>
									<span>故障状态</span>
								</li>
							</ul>
						</div>
					</div>
				</template>
			</div>
		</div>
		<div class="legends">
			<div class="legend">
				<code style="color: #009820">■</code>
				<span>上升</span>
			</div>
			<div class="legend">
				<code style="color: #0073c1">■</code>
				<span>下行</span>
			</div>
			<div class="legend">
				<code style="color: #bc7d00">■</code>
				<span>停止</span>
			</div>
			<div class="legend">
				<code style="color: #d92b2c">■</code>
				<span>故障</span>
			</div>
		</div>
	</div>
</template>
<script lang=ts>
	import { Component, Vue, Watch } from "vue-property-decorator";
	import { Route } from "vue-router";
	import Drag from "@/components/drag/drag.vue";
	import Hls from "hls.js";
	import Loading from "@/components/loading/Loading.vue";
	import { Icon, Message } from "view-design";

	@Component({
		components: {
			Drag,
			Loading,
			Icon
		}
	})
	export default class Elevator extends Vue {
		elevator:{ type:string, data:elevatorData[] }[] = [];
		showSmt:boolean = false;
		loading:boolean = true;
		readonly id:string = "elevatorCamera";
		private hls?:Hls;
		private MainLink:HTMLLinkElement = document.createElement("link");

		updateStream (uid:string):void {
			window.selected(uid);
		}

		renderCss () {
			less.render("@lightTitleBackground: rgba(0, green(@baseColor)/2, blue(@baseColor)/2, .6);.legends {background-color: @lightTitleBackground;}", {
				javascriptEnabled: true,
				modifyVars: {
					"@baseColor": this.$store.state.baseColor
				}
			}).then(data => {
				this.MainLink && this.MainLink.remove();
				const href:string = URL.createObjectURL(new Blob([ data.css ]));
				const link = document.createElement("link");
				link.href = href;
				link.rel = "stylesheet";
				document.head.appendChild(link);
				this.MainLink = link;
			});
		}

		mounted () {
			this.renderCss();
			window.elevator = (elevator:elevatorData) => {
				console.log(elevator);
				const value:elevatorData = JSON.parse(elevator.toString());
				const serial:string = value.mepsystem;
				const temp = this.elevator.find(t => t.type === serial);
				if (temp) {
					const id = value.id.toString();
					const temp2 = temp.data.find(t => t.id.toString() === id);
					if (temp2) {
						temp2.RunStation = value.RunStation;
						temp2.Lastfloor = value.Lastfloor;
						temp2.Troublestation = value.Troublestation;
					} else {
						temp.data.push(value);
					}
				} else {
					this.elevator.push({ type: value.mepsystem, data: [ value ] });
				}
			};
			// @ts-ignore
			const video:HTMLVideoElement = document.getElementById(this.id);
			if (Hls.isSupported()) {
				const hls = new Hls();
				hls.loadSource("");
				hls.attachMedia(video);
				hls.on(Hls.Events.MANIFEST_PARSED, () => {
					video.play();
				});
				this.hls = hls;
			}
			this.listeners = this.$store.subscribe((mutation) => {
				if (mutation.type === "updateLiveStream") {
					if (mutation.payload === "") {
						// @ts-ignore
						Message.info({
							content: "电梯摄像头关联缺失"
						});
						this.showSmt = false;
						return;
					}
					if (this.hls) {
						this.hls.stopLoad();
						this.hls.detachMedia();
					}
					const hls = new Hls();
					hls.loadSource(`/mag/hls/${ mutation.payload.split(",")[ 1 ] }/1/live.m3u8`);
					hls.attachMedia(video);
					this.showSmt = true;
					this.loading = true;
					hls.on(Hls.Events.MANIFEST_PARSED, () => {
						video.play();
						this.loading = false;
					});
					this.hls = hls;
				}
			});
		}

		beforeRouteLeave (from:Route, to:Route, next:Function) {
			// @ts-ignore
			window.elevator = undefined;
			this.listeners();
			this.MainLink.remove();
			next();
		}

		@Watch("$store.state.baseColor")
		onColorChange () {
			this.renderCss();
		}

		private listeners ():void {
		};
	}
</script>
